<template>
  <Dialog title="添加条目" v-model="dialogVisible">
    <el-tabs v-model="ruleForm.courseItemType" class="demo-tabs" @tab-click="handleClick">
      <el-tab-pane label="课程" :name="1" />
      <el-tab-pane label="图文" :name="2" />
      <el-tab-pane label="题目" :name="3" />
      <el-tab-pane label="直播" :name="4" />
    </el-tabs>
    <!-- 表单 -->
    <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      status-icon
      :rules="rules"
      label-width="120px"
      class="demo-ruleForm"
    >
      <el-form-item label="条目名称" prop="itemName">
        <el-input v-model="ruleForm.itemName" autocomplete="off" />
      </el-form-item>
      <el-form-item label="条目描述" prop="itemDesc">
        <el-input v-model="ruleForm.itemDesc" autocomplete="off" />
      </el-form-item>
      <el-form-item label="内容选择" prop="courseItemType">
        <el-select
          v-model="ruleForm.courseItemTypeId"
          @change="changeSelect"
          :style="{ width: '50%' }"
          placeholder="请选择"
        >
          <el-option label="内容1" :value="1" />
          <el-option label="内容2" :value="2" />
          <el-option label="自定义" :value="-1" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm(ruleFormRef)">Submit</el-button>
        <el-button @click="resetForm(ruleFormRef)">Reset</el-button>
      </el-form-item>
    </el-form>
    <!-- 表单 -->

    <!-- 动态组件 -->
    <component :is="currComponets" />

    <!-- 动态组件 -->
  </Dialog>
</template>
<script setup lang="ts">
import CourseItem from './components/courseItem.vue'
import ArticleItem from './components/articleItem.vue'
import QuestionItem from './components/questionItem.vue'
import LiveItem from './components/liveItem.vue'
const rules = ref([])
const dialogVisible = ref<boolean>(false)
const ruleFormRef = ref(null)
const ruleForm = ref<CourseItem>({
  courseItemType: 1
})

/** tab点击 */
const handleClick = (val) => {
  ruleForm.value = {}
  currComponets.value = ''
  ruleForm.value.courseItemType = val.props.name
}

/** 选择框change事件 */
const componentMapping = {
  1: CourseItem,
  2: ArticleItem,
  3: QuestionItem,
  4: LiveItem
}
const currComponets = ref()
const changeSelect = (val) => {
  if (val == -1) {
    currComponets.value = componentMapping[ruleForm.value.courseItemType]
  }
}

const open = () => {
  dialogVisible.value = true
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
</script>
